<template>
    <!-- 低代码格式-通用表单 -->
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-content">
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        v-model:selectedKeys="selectedKeys"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #operate="{ record }">
                            <div class="flex">
                                <a-link @click="showDetail(record)">
                                    {{ $t('basics.Edit') }}</a-link
                                >
                            </div>
                        </template>
                    </a-table>
                </div>
            </div>
            <a-modal
                :render-to-body="false"
                v-model:visible="visibleAdmin"
                :content-flex="false"
                :footer="false"
                :width="500"
            >
                <template #title>
                    {{ rows.config_desc }}
                </template>

                <div>
                    <template v-for="(item, i) of detailFrom" :key="i">
                        <a-form-item
                            field="config_value"
                            class="tcard-label"
                            :label="item.title"
                        >
                            <a-input
                                v-if="item.type === 'text_string'"
                                style="width: 100%; margin-right: 20px"
                                v-model="detailFrom[i].value"
                                :placeholder="item.title"
                            />
                            <a-input
                                v-if="item.type === 'text_int'"
                                type="number"
                                style="width: 100%; margin-right: 20px"
                                v-model="detailFrom[i].value"
                                :placeholder="item.title"
                            />
                            <a-radio-group
                                v-if="item.type === 'radio'"
                                v-model="detailFrom[i].value"
                                :options="item.elements"
                            >
                                <template #label="{ data }">
                                    <span>{{ data.label }}</span>
                                </template>
                            </a-radio-group>
                            <a-switch
                                v-if="item.type === 'switch'"
                                v-model="detailFrom[i].value"
                                :checked-value="1"
                                :unchecked-value="0"
                            />
                        </a-form-item>
                    </template>
                    <div class="dialog-foot">
                        <a-button
                            style="color: #000"
                            class="mr20"
                            @click="concel"
                            >{{ $t('basics.concel') }}</a-button
                        >
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="handleOkAdmin"
                            >{{ $t('basics.sure') }}</a-button
                        >
                    </div>
                </div>
            </a-modal>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
                :isShowLoad="true"
                :isShowType="true"
                :downLoadData="downFile"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { getCnfig, ServiceSwitch, updateResend } from '@/api/cloud/client.js';
import { getProjectId } from '@/api/cloud/userProject.js';
import MaImport from '@/components/import/index.vue';
import appData from '@/assets/images/emojis.json';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request.js';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const detailFrom = ref([]); //详情页表单数据
const rows = ref({});
const visibleAdmin = ref(false);
const selectedKeys = ref([]);
const faceList = ref([]);
const loading = ref(false);
const columns = [
    {
        title: t('basics.ConfigurationName'),
        dataIndex: 'config_key',
        minWidth: 300,
        slotName: 'config_key',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.ConfigurationDescription'),
        dataIndex: 'config_desc',
        minWidth: 200
    },
    {
        title: t('basics.status'),
        dataIndex: 'operate',
        slotName: 'operate',
        width: 100
    }
];
const form = ref({
    page: 1,
    pageSize: 100,
    reply_type: 0
});
const tableList = ref([]);

/**编辑 */
const showDetail = (item) => {
    let params = { config_key: item.config_key };
    $request.get('/cloud/config/getByKey', params).then((res) => {
        rows.value = item;
        detailFrom.value = res.config_value;
        visibleAdmin.value = true;
    });
};
// 获取美国项目id
const getId = async () => {
    loading.value = true;
    await getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
    });
    await getList();
    loading.value = false;
};

// 获取列表数据
const getList = () => {
    $request.get('/cloud/config/commonIndex').then((res) => {
        tableList.value = res;
    });
};

const loadEmojis = () => {
    faceList.value = appData;
};

// 上传项目操作
const crudImportRef = ref('');
const importFile = ref({
    url: 'client/quickReply/import',
    params: {}
});
const downFile = ref({
    url: 'client/quickReply/download'
});
//   导入成功后
const refresh = () => {
    getList();
};

const handleOkAdmin = () => {
    let params = { ...rows.value };
    params.config_value = detailFrom.value;
    $request.post('/cloud/config/updateCommon', params).then((res) => {
        detailFrom.value = [];
        concel();
        proxy.$message.success(t('basics.controlsSecc'));
    });
};

const concel = () => {
    visibleAdmin.value = !visibleAdmin.value;
    detailFrom.value = [];
};

getId();
loadEmojis();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
:deep(.arco-form-item-label) {
    text-align: right;
    width: 140px;
    font-weight: 600;
}
::v-deep .item-type .arco-radio {
    margin-right: 15px;
}
// ::v-deep input::-webkit-outer-spin-button,
// input::-webkit-inner-spin-button {
//     -webkit-appearance: none !important;
// }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
}
</style>
